import React, { Component } from 'react'



// 类组件
class Child extends Component {
  render () {
    return (
      <div>
        <h2>我是类组件</h2>
      </div>
    )
  }
}



// 函数子组件
const Fnc = () => {
  return (
    <div>
      <h2>我是函数组件</h2>
    </div>
  )
}
// 父组件
export default class Index extends Component {
  // js逻辑
  state = {
    // 输入框的值
    value: '123'
  }

  // 表单输入事件
  handlerInput = (e) => {
    console.log(e.target.value)
    this.setState({
      value: e.target.value
    })
  }

  // 表单提交事件
  pub = (e) => {
    // console.log(e)
    // 阻止默认行为
    e.preventDefault()
    console.log(this.fnRef, this.claRef)
    this.inputRef.current.style.background = 'red'
    console.log('获取表单用户输入的值', this.state, this.inputRef.current.value)
  }

  // 非受控组件
  // 创建ref对象
  inputRef = React.createRef()

  fnRef = React.createRef()

  claRef = React.createRef()

  // 模版
  render () {
    return (
      <div>
        <h1>表单处理</h1>
        <form>
          <p>{this.state.value}</p>
          <input ref={this.inputRef} type="text" />
          <input type="text" value={this.state.value} onChange={this.handlerInput} />
          <button onClick={this.pub}>提交</button>
          <hr />
          <Fnc ref={this.fnRef} />
          <Child ref={this.claRef} />
        </form>
      </div>
    )
  }
}
